<template>
    <div class="vue-calendar-wrap">
        <!-- 日历头部 -->
        <div class="calendar-title-wrap">
            <div class="condition-wrap">
                <span class="arrow" @click="preYear">&lt;&lt;</span>
                <span class="arrow" @click="preMonth">&lt;</span>
<!--                <select class="select-wrap">-->
<!--                    <option value="">2020年8月份</option>-->
<!--                </select>-->
                <span>{{this.time.year}}年{{this.time.month + 1}}月</span>
                <span class="arrow" @click="nextMonth">&gt;</span>
                <span class="arrow" @click="nextYear">&gt;&gt;</span>
            </div>
            <div class="title-wrap">日历</div>
            <div class="back-to-current" @click="backToCurrent">回到当前</div>
        </div>
        <!-- 日历内容 -->
        <div class="calendar-content-wrap">
            <div class="date-picker-body">
                <table width="100%" border="1" cellspacing="0" cellpadding="0">
                    <thead class="table-thead">
                        <tr>
                            <th v-for="j in 7" :key="`_` + j">{{weekDays[j-1]}}</th>
                        </tr>
                    </thead>
                    <tbody class="table-tbody">
                        <tr class="table-tr" v-for="i in 6" :key="`row_` + i">
                            <td
                                class="table-td"
                                :title="visibleDays[(i - 1)*7+(j - 1)] | formatDateTd"
                                v-for="j in 7"
                                :key="`_col` + j"
                                :class="[
                                    {noCurrentMonth: !isCurrentMonth(visibleDays[(i - 1)*7+(j - 1)])},
                                    {today: isToday(visibleDays[(i - 1)*7+(j - 1)])}
                                ]"
                                @click="clickCurrentDate(visibleDays[(i - 1)*7+(j - 1)])"
                            >
                                <div class="table-td-date">
                                    {{visibleDays[(i - 1)*7+(j - 1)].getDate()}}
                                </div>
                                <div
                                    class="defalut-status"
                                    :class="[
                                        {finish: isFinish(visibleDays[(i - 1)*7+(j - 1)])}
                                    ]"
                                >
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import * as utils from '../../utils/index'
    export default {
        name: "VueCalendar",
        props: {
          value: {
              type: Date,
              default: () => new Date()
          },
        businessList: {
          type: Array,
            default: () => []
        }
        },
        data () {
            return {
                weekDays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                time: utils.getYearMonthDay(this.value)
            }
        },
        filters: {
            /**
             * @description format td title
             * @author LinW (evan_origin@163.com)
             * @date 2020/9/2 0:04
             * @param {Function}
             * @returns {string}
             */
            formatDateTd(date) {
                let {year, month, day} = utils.getYearMonthDay(date)
                return `${year}年${month + 1}月${day}日`
            },
        },
        computed: {
            visibleDays() {
                // 先获取当前是周几
                let {year, month} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1))

                // 获取当前月份的第一天
                let currentFirstDay = utils.getDate(year, month, 1)
                // 先 生成一个 当前 2019 5 18  -- 2019 5 1
                // 获取当前是周几 把天数往前 移动 几天
                let week = currentFirstDay.getDay()
                // 当前开始的天数
                let starDay = currentFirstDay - week * 60 *60 *1000 * 24
                // 循环42天
                let arr = []
                for (let i = 0; i < 42; i++) {
                    // 依次循环出42天
                    arr.push(new Date(starDay+i * 60 * 60 * 1000 * 24))
                }
                return arr
            }
        },
        methods: {
            isFinish() {
                // let {year, month, day} = utils.getYearMonthDay(date)
                // let newDate = `${year}-${month}-${day}`
                // let result = null
                // this.businessList.forEach(item => {
                //     if (item["date"] === newDate) {
                //         result = true
                //     }
                // })
                // return result
            },
            clickCurrentDate(date) {
                let {year, month, day} = utils.getYearMonthDay(new Date(date.getTime()))
                alert(`${year}年${month+1}月${day}日`)
            },
            /**
             * @description 回到当前
             * @author LinW (evan_origin@163.com)
             * @date 2020/9/1 22:54
             * @param {Function}
             * @returns {number}
             */
            backToCurrent() {
                this.time = utils.getYearMonthDay(new Date())
                this.$emit('update:value')
            },
            /**
             * @description 判断是否是当月的 用来控制样式
             * @author LinW (evan_origin@163.com)
             * @date 2020/9/1 23:38
             * @param {Function}
             * @returns {number}
             */
            isCurrentMonth(date) {
                // 判断与传入的 年和月是否一致
                let {year, month} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1))
                let {year: y, month: m} = utils.getYearMonthDay(date)
                return year === y && month === m
            },
            /**
             * @description 判断是不是今天 控制今天的样式
             * @author LinW (evan_origin@163.com)
             * @date 2020/9/2 0:18
             * @param {Function}
             * @returns {number}
             */
            isToday(date) {
                let {year, month, day} = utils.getYearMonthDay(new Date())
                let {year: y, month: m, day: d} = utils.getYearMonthDay(date)
                return year === y && month === m && day === d
            },
            // 切换(上个月)
            preMonth() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setMonth(d.getMonth()-1)
                this.time = utils.getYearMonthDay(d)
            },
            // 切换(下个月)
            nextMonth() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setMonth(d.getMonth()+1)
                this.time = utils.getYearMonthDay(d)
            },
            // 切换(上一年)
            preYear() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setFullYear(d.getFullYear() - 1)
                this.time = utils.getYearMonthDay(d)
            },
            // 切换(下一年)
            nextYear() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setFullYear(d.getFullYear() + 1)
                this.time = utils.getYearMonthDay(d)
            }
        }
    }
</script>

<style scoped lang="less">
    .vue-calendar-wrap {
        width: 100%;
        user-select: none;
        .calendar-title-wrap {
            width: 100%;
            padding:8px 0;
            display: flex;
            text-align: center;
            background: lightsteelblue;
            .condition-wrap {
                flex: 0 0 30%;
                box-sizing: border-box;
                cursor: pointer;
                .select-wrap {
                    margin: 0px 8px;
                }
                .arrow {
                    padding: 0 8px;
                }
            }
            .title-wrap {
                flex: 1;
            }
            .back-to-current {
                cursor: pointer;
                flex: 0 0 30%;
            }
        }
        .calendar-content-wrap {
            .date-picker-body {
                user-select: none;
                cursor: pointer;
                .table-tbody {
                    .table-tr {
                        .table-td {
                            font-weight: bold;
                            &.noCurrentMonth{/* 非当用的样式 */
                                color: gray;
                                background: rgba(0,0,0,.2);
                            }
                            &.today {/* 当天的样式 */
                                color: #fff;
                                background-color: lightgreen;
                            }
                            .table-td-date {
                                height: 70px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                    .defalut-status {
                        height: 8px;
                        &.finish {
                            background-color: green;
                        }
                    }
                }
            }

        }
    }

</style>
